﻿<link href="~/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.getRowInfo.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.selectCheck.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.checkPostion.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/treegrid/jeasyui.extensions.treegrid.operateRow.js"></script>
<div class="easyui-panel" data-options="fit:true">
    <table id="tg1"></table>
</div>

<script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];
            result.push(normal);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            treeField: "AreaName",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [
                {
                    iconCls: 'icon-add',
                    text: "移除[杭州]",
                    handler: function () {
                        $("#tg1").treegrid("remove", function (row, index) { return row["ID"] == 100; });
                        var hiddenRows = $("#tg1").treegrid("getHiddenRows"); console.log(hiddenRows);
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "移除[天津]、[海南]",
                    handler: function () {
                        $("#tg1").treegrid("removeRows", [7, 10]);
                        var hiddenRows = $("#tg1").treegrid("getHiddenRows"); console.log(hiddenRows);
                    }
                },
                "-",
                {
                    iconCls: 'icon-add',
                    text: "隐藏[宁波]",
                    handler: function () {
                        $("#tg1").treegrid("hideRow", function (row, index) { return row["ID"] == 101; });
                        var hiddenRows = $("#tg1").treegrid("getHiddenRows"); console.log(hiddenRows);
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "显示[宁波]",
                    handler: function () {
                        $("#tg1").treegrid("showRow", function (row, index) { return row["ID"] == 101; });
                        var hiddenRows = $("#tg1").treegrid("getHiddenRows"); console.log(hiddenRows);
                    }
                },
                "-",
                {
                    iconCls: 'icon-add',
                    text: "隐藏所有",
                    handler: function () {
                        $("#tg1").treegrid("hideRows", true);
                        var hiddenRows = $("#tg1").treegrid("getHiddenRows"); console.log(hiddenRows);
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "显示所有",
                    handler: function () {
                        $("#tg1").treegrid("showRows", true);
                        var hiddenRows = $("#tg1").treegrid("getHiddenRows"); console.log(hiddenRows);
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "隐藏[江西]、[西藏]",
                    handler: function () {
                        $("#tg1").treegrid("hideRows", [8, 12]);
                        var hiddenRows = $("#tg1").treegrid("getHiddenRows"); console.log(hiddenRows);
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "显示[江西]、[西藏]",
                    handler: function () {
                        $("#tg1").treegrid("showRows", [8, 12]);
                        var hiddenRows = $("#tg1").treegrid("getHiddenRows"); console.log(hiddenRows);
                    }
                },
                "-",
                {
                    iconCls: 'icon-add',
                    text: "移动[西藏]到[内蒙古]的下级",
                    handler: function () {
                        $("#tg1").treegrid("moveRow", {
                            target: 13,
                            source: 12,
                            point: "append"
                        });
                        console.log($("#tg1").treegrid("find", 12));
                    }
                },
                {
                    iconCls: 'icon-add',
                    text: "移动[南京]到下一格",
                    handler: function () {
                        $("#tg1").treegrid("shiftRow", {
                            id: 3,
                            point: "down"
                        });
                    }
                }
            ],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/treegrid/treegrid-common-data.json"
        };

        $("#tg1").treegrid(options);
    });
</script>